<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
    <style>
        body>div{ margin: 10px 0;}
        @keyframes a1{
            from{
                width: 0;
            }
            to{
                width: 100%;
            }
        }
        .box1{
            width: 200px;
            height: 50px;
            background-color: #ccc;
        }
        .box1>div{
            width: 0;
            height: 100%;
            background-color: #000;
            animation: a1 2s linear infinite;
        }

        .box2{
            width: 200px;
            height: 50px;
            border-radius: 50px;
            border: 2px solid #ccc;
            overflow: hidden;
        }
        .box2>div{
            width: 0;
            height: 100%;
            background: linear-gradient(90deg, pink, skyblue);
            animation: a1 2s linear infinite;
        }
        .box3{
            width: 200px;
            height: 50px;
            border-radius: 50px;
            background: repeating-linear-gradient(45deg,#888 0,#888 20px,#ccc 0,#ccc 40px);
            overflow: hidden;
        }
        .box3>div{
            width: 0;
            height: 100%;
            background: repeating-linear-gradient(45deg,red 0,red 20px,orange 0,orange 40px);
            animation: a1 2s linear infinite;
        }
        .box4{
            width: 200px;
            height: 50px;
            background: linear-gradient(90deg,#ccc 70%,transparent 70%) 100%/40px;
            overflow: hidden;
        }
        .box4>div{
            width: 200px;
            height: 50px;
            background: linear-gradient(90deg,#000 70%,transparent 70%) 100%/40px;
            animation: a2 2s steps(6,start) infinite;
        }
        @keyframes a2{
            from{
                width: 0;
                transform: translateX(-40px);
            }
            to{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="box1"><div></div></div>
    <div class="box2"><div></div></div>
    <div class="box3"><div></div></div>
    <div class="box4"><div></div></div>
</body>
</html>